<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let menuData = [
            {
                id: '1',
                title: '首页',
                show: true
            },
            {
                id: '2',
                title: '学生管理',
                show: true,
                children: [
                    {
                        id: '2-1',
                        title: '学生列表',
                        show: true
                    },
                    {
                        id: '2-2',
                        title: '添加学生'
                    }
                ]
            },
            {
                id: '3',
                title: '教师管理',
                show: true,
                children: [
                    {
                        id: '3-1',
                        title: '教师列表',
                        show: true,
                        children: [
                            {
                                id: '3-1-1',
                                title: '三级菜单',
                                show: true
                            }
                        ]
                    },
                    {
                        id: '3-2',
                        title: '添加教师',
                    }
                ]
            }
        ]


        // 4. 找出所有show为true的数据
        function filterMenuData(menuArray) {
            return menuArray.reduce((prev, item) => {
                if (item.show) {   // 进入if，说明item本身保留，但是item的children不一定要保留   
                    if (item.children) {
                        // 进入if，说明当前item有children
                        // item要显示，且item有children
                        return [
                            ...prev,
                            {
                                id: item.id,
                                title: item.title,
                                // 递归函数
                                children: filterMenuData(item.children)
                            }
                        ]
                    }
                    // item要显示，且item没有children：返回一个组合好的新数组，给下一轮循环的prev
                    return [
                        ...prev,  // 保留前几轮的item
                        item      // 加入当前这一轮的item
                    ]
                }
                // 当前item不需要展示，直接将上一轮的prev返回给下一轮
                return prev;
            }, [])
        }

        console.log(filterMenuData(menuData));



        // const filterMenuData = menuData.filter(item => {
        //     if(item.children) {
        //         item.children.filter(childItem => {
        //             return childItem.show;
        //         })
        //     }
        //     return item.show;
        // })
        // console.log(filterMenuData);




        // 2. 将所有菜单中的title属性名换成name
        function changeMenuTitle(menuArray) {
            return menuArray.map(item => {
                if (item.children) {
                    return {
                        id: item.id,
                        name: item.title,
                        // 2. 第二次调用，传递children小数组
                        children: changeMenuTitle(item.children)
                    }
                }
                return {
                    id: item.id,
                    name: item.title
                }
            })
        }

        // 1. 第一次调用，传递完整的大数组
        // const newMenuData = changeMenuTitle(menuData)
        // console.log(newMenuData);



        // const newMenuData = menuData.map(item => {
        //     if (item.children) {
        //         return {
        //             id: item.id,
        //             name: item.title,
        //             children: item.children.map((childItem) => {
        //                 return {
        //                     id: childItem.id,
        //                     name: childItem.title
        //                 }
        //             })
        //         }
        //     }
        //     return {
        //         id: item.id,
        //         name: item.title
        //     }
        // })
        // console.log(newMenuData);














        // const newMenuData = menuData.map(item => {
        //     if(item.children) {
        //         // 获取二级菜单小数组
        //         // const oldChildren = item.children;

        //         // const newChildren = oldChildren.map((childItem) => {
        //         //     return {
        //         //         id: childItem.id,
        //         //         name: childItem.title
        //         //     }
        //         // })

        //         // return {
        //         //     id: item.id,
        //         //     name: item.title,
        //         //     children: newChildren
        //         // }

        //         return {
        //             id: item.id,
        //             name: item.title,
        //             children: item.children.map((childItem) => {
        //                 return {
        //                     id: childItem.id,
        //                     name: childItem.title
        //                 }
        //             })
        //         }
        //     }
        //     return {
        //         id: item.id,
        //         name: item.title
        //     }
        // })
        // console.log(newMenuData);

        // 1. 扁平化（将所有的children里的对象提取来，和一级菜单在同一等级）
        function expandMenu(menuArray) {
            return menuArray.reduce((prev, item) => {
                if (item.children) {
                    return [
                        ...prev,
                        {
                            id: item.id,
                            title: item.title
                        },
                        ...expandMenu(item.children)
                    ]
                }
                // 没有children
                return [...prev, item]
            }, [])
        }
        console.log(expandMenu(menuData));


        // const newMenuData = menuData.reduce((prev, item) => {
        //     if (item.children) {
        //         return [
        //             ...prev,
        //             {
        //                 id: item.id,
        //                 title: item.title
        //             },
        //             ...item.children
        //         ]
        //     }
        //     // 没有children
        //     return [...prev, item]
        // }, [])
        // console.log(newMenuData);



        // 3. 扁平化（没有children，一级保留；有children，保留children，不要一级）

        function expandMenu(menuArray) {
            return menuArray.reduce((prev, item) => {
                if (item.children) {
                    return [
                        ...prev,
                        // {
                        //     id: item.id,
                        //     title: item.title
                        // },
                        ...expandMenu(item.children)
                    ]
                }
                // 没有children
                return [...prev, item]
            }, [])
        }
        console.log(expandMenu(menuData));


    </script>
</body>

</html>